import React, { Component } from 'react';
import { Button, Cascader, Form, Input, NavBar, Switch } from 'antd-mobile';
import { MoreOutline } from 'antd-mobile-icons';
import './Modify.scss'
// import service from '../../api';

class Modify extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            setVisible: false,
            value: [''],
            options: [{
                label: '浙江',
                value: '浙江',
                children: [
                    {
                        label: '杭州',
                        value: '杭州',
                        children: [
                            {
                                label: '西湖区',
                                value: '西湖区',
                            },
                            {
                                label: '上城区',
                                value: '上城区',
                            },
                            {
                                label: '余杭区',
                                value: '余杭区',
                                disabled: true,
                            },
                        ],
                    },
                    {
                        label: '温州',
                        value: '温州',
                        children: [
                            {
                                label: '鹿城区',
                                value: '鹿城区',
                            },
                            {
                                label: '龙湾区',
                                value: '龙湾区',
                                disabled: true,
                            },
                            {
                                label: '瓯海区',
                                value: '瓯海区',
                            },
                        ],
                    },
                    {
                        label: '宁波',
                        value: '宁波',
                        children: [
                            {
                                label: '海曙区',
                                value: '海曙区',
                            },
                            {
                                label: '江北区',
                                value: '江北区',
                            },
                            {
                                label: '镇海区',
                                value: '镇海区',
                            },
                        ],
                    },
                ],
            },
            {
                label: '安徽',
                value: '安徽',
                children: [
                    {
                        label: '合肥',
                        value: '合肥',
                        children: [
                            {
                                label: '包河区',
                                value: '包河区',
                            },
                            {
                                label: '蜀山区',
                                value: '蜀山区',
                            },
                            {
                                label: '瑶海区',
                                value: '瑶海区',
                            },
                        ],
                    },
                    {
                        label: '芜湖',
                        value: '芜湖',
                        children: [
                            {
                                label: '镜湖区',
                                value: '镜湖区',
                            },
                            {
                                label: '弋江区',
                                value: '弋江区',
                            },
                            {
                                label: '湾沚区',
                                value: '湾沚区',
                            },
                        ],
                    },
                ],
            },
            {
                label: '江苏',
                value: '江苏',
                children: [
                    {
                        label: '南京',
                        value: '南京',
                        children: [
                            {
                                label: '玄武区',
                                value: '玄武区',
                            },
                            {
                                label: '秦淮区',
                                value: '秦淮区',
                            },
                            {
                                label: '建邺区',
                                value: '建邺区',
                            },
                        ],
                    },
                    {
                        label: '苏州',
                        value: '苏州',
                        children: [
                            {
                                label: '虎丘区',
                                value: '虎丘区',
                            },
                            {
                                label: '吴中区',
                                value: '吴中区',
                            },
                            {
                                label: '相城区',
                                value: '相城区',
                            },
                        ],
                    },
                ],
            },]
        }
    }

    confirm(val: any) {
        this.setState({ value: val })
    }
    async onFinsh(value: any) {
        console.log(value.name);
        console.log(this.state.value);
        var add = this.state.value
        // var res = await service.address.address_add({ userid: localStorage.getItem('userid'), name: value.name, tel: value.tel, province: add[0], city: add[1], county: add[2], addressDetail: value.address, isDefault: value.delivery })
        // console.log(res);
        this.props.history.push('/address')

    }
    render() {
        return (
            <div className='modify'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} right={<MoreOutline style={{ fontSize: 35 }} />}>增加地址</NavBar>
                </div>


                <div className="main">
                    <Form
                        className='form'
                        layout='horizontal'
                        onFinish={(value) => { this.onFinsh(value) }}
                        footer={
                            <Button
                                block type='submit' color='primary' size='large'
                            >
                                提交
                            </Button>
                        }
                    >

                        <Form.Item
                            name='name'
                            label='姓名'
                            rules={[{ required: true, message: '姓名不能为空' }]}
                        >
                            <Input placeholder='请输入姓名' />
                        </Form.Item>

                        <Form.Item
                            name='tel'
                            label='电话'
                            rules={[{ required: true, message: '手机号不能为空' }]}
                        >
                            <Input placeholder='请输入电话' />
                        </Form.Item>

                        <Form.Item
                            label='地址'
                            rules={[{ required: true, message: '地址不能为空' }]}
                        >
                            <Input

                                placeholder='请输入地址'
                                onClick={() => {
                                    this.setState({ setVisible: true })
                                }}
                                value={this.state.value}

                            />

                            <Cascader
                                options={this.state.options}
                                visible={this.state.setVisible}
                                onClose={() => {
                                    this.setState({ setVisible: false })
                                }}
                                value={this.state.value}
                                onConfirm={(value) => { this.confirm(value) }}

                            />

                        </Form.Item>

                        <Form.Item
                            name='address'
                            label='详细地址'
                            rules={[{ required: true, message: '地址不能为空' }]}
                        >
                            <Input placeholder='请输入地址' />
                        </Form.Item>



                        <Form.Item
                            name='delivery'
                            label='设为默认地址'
                            childElementPosition='right'
                        >
                            <Switch />
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Modify;